<template>
    <div class="container">
        <div class="code">
            验证码将发送到
            <span class="phone">{{ phone }}</span>
        </div>
        <div class="input">
            <van-field
                center
                clearable
                v-model="code"
                type="number"
                maxlength="6"
                placeholder="请输入验证码">
                <div
                    slot="button"
                    type="primary"
                    size="middle"
                    plain
                    class="input_btn"
                    @click="getCode">
                    {{ codeStr }}
                </div>
            </van-field>
        </div>
        <div
            class="btn btn_next"
            @click="goNext">
            下一步
        </div>
        <div
            class="btn btn_switch"
            @click="changeValid">
            切换其他验证方式
        </div>
    </div>
</template>
<script>
import { Notify } from 'vant';
export default {
    data() {
        return {
            phone: '178******66',
            code: '',
            codeStr: '获取验证码',
            countdown: 5,
            countInit: 5,
        };
    },
    created() {
        this.$nextTick(() => {});
    },
    methods: {
        getCode() {
            if (this.disableButton) return;
            // 获取验证码
            this.$http
                .post('/get/code')
                .then(res => {
                    const { success, data, msg } = res.data;
                    Notify({ type: success ? 'success' : 'warning', message: msg });
                    if (success) {
                        this.disableButton = true; // 禁用按钮
                        this.startCountdown(); //倒计时
                    }
                })
                .catch(err => {});
            // 开始倒计时
        },
        startCountdown() {
            const countdownTimer = setInterval(() => {
                if (this.countdown === 0) {
                    clearInterval(countdownTimer);
                    this.countdown = this.countInit;
                    this.codeStr = '重发验证码'; // 重置倒计时文本
                    this.disableButton = false; // 重新启用按钮
                } else {
                    this.countdown--;
                    this.codeStr = this.countdown + 'S';
                }
            }, 1000);
        },
        // 下一步
        goNext() {
            if (!this.code) return;
            if (this.code.length < 6) {
                return Notify({ type: 'warning', message: '验证码错误' });
            }
            this.$http
                .post('/get/code', { code: this.code })
                .then(res => {
                    const { success, data, msg } = res.data;
                    if (success) {
                        this.$router.push({ path: '/resultFiled' });
                    }
                })
                .catch(err => {});
        },
        // 切换其他验证方式
        changeValid() {
            this.$http
                .post('/get/code', { code: this.code })
                .then(res => {
                    const { success, data, msg } = res.data;
                    if (success) {
                        if (res.data.code == 1) {
                            this.$router.push({ path: '/resView' });
                        } else {
                            this.$router.push({ path: 'otherValid' });
                        }
                    }
                })
                .catch(err => {});
        },
    },
};
</script>
<style scoped lang="scss">
.code {
    margin-top: 50px;
    color: gray;
    .phone {
        color: rgb(18, 18, 18);
        font-size: 16px;
        font-weight: bold;
    }
}
.input {
    padding: 40px 30px 30px;
    /deep/ .van-cell {
        background-color: #f4f4f4;
        border-radius: 8px;
        line-height: 30px;
    }
    &_btn {
        color: #eb682c;
    }
}
.btn {
    color: #fff;
    margin: 0 30px;
    line-height: 50px;
    border-radius: 25px;
}
.btn_next {
    background-image: linear-gradient(to right, #ef9135, #eb672b);
}
.btn_switch {
    border: 1px solid #eb672b;
    color: #eb672b;
    margin-top: 16px;
}
</style>
